<!-- components/modules/ImageTextPanel.vue -->
<template>
  <div class="image-and-text">
    <div class="module-title">多视角理解</div>
    <div class="image-container">
      <div class="uploaded-image">
        <img :src="uploadedImage" alt="Uploaded Image" v-if="uploadedImage" />
        <div v-else class="placeholder">摄像头画面</div>
      </div>
      <div class="received-image">
        <img :src="receivedImage" alt="Received Image" v-if="receivedImage" />
        <div v-else class="placeholder">场景图</div>
      </div>
    </div>
    <div class="text-content">
      {{ receivedText }}
    </div>
  </div>
</template>

<script setup>
defineProps({
  uploadedImage: {
    type: String,
    default: '',
  },
  receivedImage: {
    type: String,
    default: '',
  },
  receivedText: {
    type: String,
    default: '',
  },
})
</script>

<style scoped>
/* 右下角：图片和文本内容 */
.image-and-text {
  flex: 1; /* 占下部空间的50% */
  display: flex;
  flex-direction: column;
  border: 1px solid #ddd; /* 边框 */
  border-radius: 8px; /* 圆角 */
  padding: 8px; /* 内边距 */
  background-color: white; /* 背景色 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
  overflow: hidden; /* 防止内容溢出 */
  position: relative; /* 为子元素的绝对定位提供参考 */
}

.image-and-text .module-title {
  margin-bottom: 8px; /* 标题与内容之间的间距 */
}

.image-and-text .image-container {
  margin: 18px 0 0 0;
  flex: 8; /* 图片区域占 90% */
  display: flex;
  gap: 16px; /* 两张图片之间的间距 */
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 防止图片溢出 */
  border-radius: 4px; /* 圆角 */
  background-color: #f9f9f9; /* 背景色 */
  border: 1px solid #eee; /* 边框 */
  padding: 8px; /* 内边距，避免图片紧贴边框 */
}

.image-and-text .image-container .uploaded-image,
.image-and-text .image-container .received-image {
  flex: 1; /* 两张图片平分宽度 */
  height: 100%; /* 高度与容器一致 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 防止图片溢出 */
  border-radius: 4px; /* 圆角 */
  background-color: #fff; /* 图片区域背景色 */
  border: 1px solid #ddd; /* 图片区域边框 */
}

.image-and-text .image-container img {
  max-width: 100%; /* 图片最大宽度为容器宽度 */
  max-height: 100%; /* 图片最大高度为容器高度 */
  object-fit: contain; /* 保持图片比例，完整显示图片 */
  border-radius: 4px; /* 图片圆角 */
}

.image-and-text .image-container .placeholder {
  color: #999; /* 占位符文字颜色 */
  font-style: italic; /* 占位符文字样式 */
  text-align: center; /* 文字居中 */
  padding: 20px; /* 内边距 */
}

.image-and-text .text-content {
  flex: 2; /* 文本区域占 10% */
  overflow-y: auto; /* 纵向滚动 */
  padding: 8px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  font-weight: bold;
  line-height: 1.6; /* 行高 */
  color: #333; /* 文字颜色 */
  background-color: #f9f9f9; /* 背景色 */
  border-radius: 4px; /* 圆角 */
  border: 1px solid #eee; /* 边框 */
  margin-top: 8px; /* 文本区域与图片区域之间的间距 */
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* 使用现代字体 */
}
</style>
